<template>
	<view>
		<!-- <dsl-navbar title="公告管理" isBack bgTopImg="white" isicon='true' url='/static/user/modules/imgrili.png' -->
		<!-- @rightForm='rightForm'></dsl-navbar> -->

		<view class="rowsb padding-lr bg-white align-center" :style="{'padding-top':StatusBar+'px'}">
			<view class="cuIcon-left" @click="$tools.back"></view>
			<view class="text-lg text-bold text-black">公告管理</view>
			<picker mode="date" :value="date" start="2015-09-01" end="2090-09-01" @change="DateChange">
				<view class="picker">
					<image src="/static/user/modules/imgrili.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
			</picker>
		</view>

		<view class="rowsc bg-white padding">
			<view class="seach align-center rowsc">
				<image src="/static/icon/icon_sysous.png" mode="widthFix" style="width: 30rpx;" class="margin-right-sm">
				</image>
				<input type="text" value="" placeholder="搜索公告标题、公告内容" v-model="inputValue" />
			</view>
		</view>
		<view v-if="messageList && messageList.length !=0">

			<view class="consult  bg-white padding margin radius animation-scale-up"
				@click="$tools.push('/pages/plugins/noticeDetail?id='+item.id)" v-for="(item,index) in messageList"
				:key="index">
				<view class="align-center rowsb">
					<view class=" onelineshow ">
						<view class="align-center">
							<view class="table margin-right-sm" v-if="item.is_top==1">
								置顶
							</view>
							<view class="title onelineshow">
								{{item.title}}
							</view>
						</view>
					</view>
					<view @click.stop="setting(item.id,item.is_top,item)">
						<image src="/static/icon/shenglue.png" mode=" " style="width: 50rpx;height: 50rpx;"></image>
					</view>
				</view>
				<view class="flex justify-between align-center">
					<view>
						<view class="content margin-tb">
							{{item.content}}
						</view>
						<view class="align-center">
							<view class="name onelineshow">
								{{item.issueName}}
							</view>
							<view class="time margin-left">
								{{item.createtime}}
							</view>
						</view>
					</view>
					<view>
						<image :src="item.image" mode="aspectFill" class="image"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<moreLoading></moreLoading>
		</view>

		<view @click="$tools.push('/pages/plugins/issueNotice')">
			<image src="/static/icon/imgfabu.png" mode="" class="upload"></image>
		</view>
	</view>
</template>

<script>
	import {
		getmessageList, //列表
		messageStick, //置顶
		messageDelete, //公告撤回
	} from '@/common/path.js'
	export default {
		data() {
			return {
				pageData: 1, //第一页
				time: '', //根据时间筛选
				inputValue: '', //根据搜索筛选
				messageList: [], //公告列表
				date: '', //选择的时间
				// #ifdef H5
				StatusBar: 20,
				// #endif
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {
			this.getmessageList()
		},
		watch: {
			inputValue() {
				this.getmessageList()
			}
		},
		methods: {
			//根据时间筛选
			DateChange(e) {
				this.date = e.detail.value
				this.getmessageList()
			},
			//公告
			getmessageList() {
				let data = {
					page: this.pageData,
					listrows: 999,
					seek: this.inputValue,
					time: this.date
				}
				this.Http.POST(getmessageList, data)
					.then((res) => {
						console.log('[公告]', res);
						if (res.code == 1) {
							this.messageList = res.data
						}
					})
			},
			//日历
			rightForm() {
				this.$tools.showToast('日历')
			},
			//公告操作
			setting(id, is_top, item) {
				let _this = this
				let type = 2
				let list = ['取消置顶公告', '编辑', '删除']
				console.log(is_top);
				if (is_top == 2) {
					list[0] = '置顶'
					type = 1
				}
				uni.showActionSheet({
					itemList: list,
					success: function(res) {
						if (res.tapIndex == 0) { //置顶
							_this.messageStick(id, type)
						} else if (res.tapIndex == 1) { //编辑
							let obj = JSON.stringify(item)
							_this.$tools.push('/pages/plugins/issueNotice?obj=' + obj)
						} else if (res.tapIndex == 2) { //撤回
							_this.messageDelete(id)
						}
						
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//置顶接口
			messageStick(id, type) {
				let data = {
					id: id,
					type: type
				}
				this.Http.POST(messageStick, data)
					.then((res) => {
						console.log('[置顶]', res);
						if (res.code == 1) {
							this.getmessageList()
							this.$tools.showToast(res.msg)
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			},
			//撤回公告
			messageDelete(id) {
				let data = {
					id: id,
				}
				this.Http.POST(messageDelete, data)
					.then((res) => {
						console.log('[置顶]', res);
						if (res.code == 1) {
							this.getmessageList()
							this.$tools.showToast(res.msg)
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			}
		},

		computed: {},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.seach {
		width: 690rpx;
		height: 70rpx;
		background: #F7F6FA;
		opacity: 1;
		border-radius: 35rpx;
	}

	.consult {
		.table {
			height: 30rpx;
			border: 1rpx solid #FB8A00;
			border-radius: 6rpx;
			color: #FB8A00;
			font-size: 20rpx;
			line-height: 30rpx;
			width: 60rpx;
			text-align: center;
		}

		.title {
			width: 420rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.content {
			width: 476rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.name {
			width: 100rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.time {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.image {
			width: 130rpx;
			height: 86rpx;
			background-color: #EEEEEE;
		}
	}

	page {
		background: #F7F6FA;
	}

	.upload {
		width: 110rpx;
		height: 110rpx;
		position: fixed;
		right: 30rpx;
		bottom: 100rpx;
		z-index: 99;
	}
</style>
